<script>
// import SectionProductCard from './SectionProductCard.vue';

export default {
  props: {
    cat: {
      type: Object,
      required: true
    }
  }
}
</script>

<script setup>
import SectionProductCard from './SectionProductCard.vue'
</script>

<template>
  <h2 class="category_name">{{ cat.name }}</h2>
  <section :id="`cat_${cat.id}`">
    <SectionProductCard v-for="product in cat.products" :product="product" :type="cat.type" />
  </section>
</template>

<style scoped>
h2 {
  margin-top: 30px;
}
section {
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* height: 408px; */
  text-align: center;
  flex: 1;
  flex-basis: 40%;
  margin-top: 20px;
  text-align: center;
}

.category_name {
  color: #838383;
  font-family: Montserrat;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
</style>
